
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <!--<button onclick="handleClick()" id="mybtn" >点击此处</button>-->
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script> 
  
    <script type="text/javascript" src="../echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        function handleConfigOption(data) {
            var option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: data.legend,
                    left: '5%',
                    icon: '',
                    borderWidth: 1,
                    borderColor: '#333'
                },
                grid: {
                    show: true,
                    left: '5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                    borderColor: '#000',
                    borderWidth: 1
                },
                xAxis: [{
                    show: true,
                    type: 'category',
                    boundaryGap: false,
                    minorTick: {
                        show: true,
                        splitNumber: 6
                    },
                    axisTick: {
                        show: true,
                        length: 6,
                        inside: true
                    },
                    data: data.xAxisList
                }],
                yAxis: [{
                    type: 'value',
                    name: '温度',
                    nameLocation: 'middle',
                    nameTextStyle: {
                        color: '#000',
                        fontSize: 20,
                        padding: [0, 0, 30, 0]
                    },
                    axisTick: {
                        show: true,
                        length: 6,
                        inside: true
                    },
                    minorTick: {
                        show: true,
                        splitNumber: 6
                    },
                    max: 5000,
                    min: 0
        }],
        series: [
            /*{
              name: '温度',
              type: 'line',
              stack: 'Total',
              smooth: true,
              data: [101, 105, 0, 105, 100 ]
            },
            {
              name: '温度1',
              type: 'line',
              stack: 'Total',
              smooth: true,
              data: [201, 205, 202, 205, 200, 201]
            }*/
        ]
                    };

                data.series.forEach(function (item) {

                        option.series.push({
                            name: item.name,
                            type: 'line',
                            //stack: 'Total',
                            smooth: true,
                            data: item.data
                        })
                })
        return option
                }


        function handleClick() {
            var data = { 
                xAxisList: ['2024/5/23 21:22:22','2024/5/23 21:27:22','2024/5/23 21:32:22','2024/5/23 21:37:22','2024/5/23 21:42:22','2024/5/23 21:47:22','2024/5/23 21:52:22','2024/5/23 21:57:22','2024/5/23 22:02:22','2024/5/23 22:07:22','2024/5/23 22:12:22'],
                
                legend: ['1风口','2风口','3风口' ],
				series: [ 
							{ name: '1风口', data: [0,0,3074,0,3981,0,2908,0,0,0,0]},
							{ name: '2风口', data: [0,0,0,0,3917,3963,2907,0,0,2556,3265]}, 
							{ name: '3风口', data: [3967,0,0,2734,0,0,0,0,2562,0,3267]}
						]
                    }
        var option = handleConfigOption(data)
      
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.removeEventListener('resize', myChart.resize);
        window.addEventListener('resize', myChart.resize);
                }

        handleClick();


    </script>
</body>
</html>